<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .staggered-list-content {
            max-width: 400px;
            margin: 2rem auto;
        }

        .list {
            list-style-type: none;
            display: flex;
            flex-direction: column;
            height: 100vh;
            padding: 0;
        }

        .list li + li {
            margin-top: 1rem;
        }

        .listItem {
            cursor: pointer;
            background-color: #d0d0d0;
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 1rem;
        }

        .avatar {
            width: 4rem;
            height: 4rem;
            border-radius: 100px;
            background-color: grey;
            margin-right: 2rem;
        }

        .listItem.expanded .avatar {
            width: 8rem;
            height: 8rem;
            margin-right: 0;
            margin-bottom: 1rem;
        }

        .line {
            background-color: grey;
            width: 14rem;
            border-radius: 6px;
            height: 0.5rem;
        }

        .line:nth-of-type(2) {
            width: 11rem;
        }

        .line:nth-of-type(3) {
            width: 8rem;
        }

        .line + .line {
            margin-top: 1rem;
        }

        .listItem.expanded .description {
            display: flex;
            align-items: center;
            flex-direction: column;
        }

        .listItem.expanded {
            background-color: #d0d0d0;
            padding: 2rem;
            flex-direction: column;
        }

        .additional-content {
            width: 100%;
            margin-top: 2rem;
            display: none;
        }

        .listItem.expanded .additional-content {
            display: block;
        }

        .chunk {
            border-radius: 3px;
            background-color: gray;
            height: 5rem;
            opacity: 0;
        }

        .listItem.expanded .chunk {
            opacity: 1;
        }

        .chunk + .chunk {
            margin-top: 1rem;
        }
    </style>
</head>
<body>
<div class="staggered-list-content">
    <ul class="list">
        <li class="listItem">
            <div class="avatar"></div>
            <div class="description">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </div>
            <div class="additional-content">
                <div class="chunk"></div>
                <div class="chunk"></div>
                <div class="chunk"></div>
            </div>
        </li>
    </ul>
</div>

<!-- 引入 GSAP 和 Flip 插件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/Flip.min.js"></script>
<script>
    gsap.registerPlugin(Flip);

    const dur = 0.5;
    let lastItems = [];
    let lastIndex = -1;

    const listItems = gsap.utils.toArray('.listItem');
    listItems.forEach((item, i) => {
        item.addEventListener('click', () => {
            // Get all content within the clicked item
            const itemTargets = gsap.utils.toArray(item.querySelectorAll('*'));

            // Check to see if the item is the same one as the last time
            const isSameAsLast = i === lastIndex && listItems[lastIndex];

            // Get all the items that are changing this click
            const targets = isSameAsLast ?
                listItems.concat(itemTargets)
                : listItems.concat(itemTargets.concat(lastItems));

            // grab the current state of the targets (before changing)
            const state = Flip.getState(targets);

            // Animate out the last clicked item if it's not the same as the current
            if(!isSameAsLast && listItems[lastIndex]) {
                listItems[lastIndex].classList.remove('expanded');
            }

            // Toggle the display on the clicked item
            listItems[i].classList.toggle('expanded');

            Flip.from(state, {
                duration: dur,
                ease: "power1.inOut",
                absolute: true, // make things position: absolute during the flip
                nested: true,   // we've got nested flipping elements (more expensive processing)
                // Fade in or out the elements within the item
                onEnter: elements => gsap.fromTo(elements, {opacity: 0}, {opacity: 1, duration: dur / 2, delay: dur / 2}),
                onLeave: elements => gsap.fromTo(elements, {opacity: (i, el) => state.getProperty(el, "opacity")}, {opacity: 0, duration: dur / 2}),
            });

            // Update our variables
            lastItems = itemTargets;
            lastIndex = i;
        });
    });
</script>
</body>
</html>